<template>
	<view>
		<zero-loading type="circle" v-if="loading"></zero-loading>
		<view class="title "></view>

		<view v-if="device_num==0" :style='{ height: mainHeight }'>
			<view class="flex align-center justify-center" style="height: 70%;width: 100%;">
				<view class="padding-bottom-xl">
					<view><image class='avatar-img' src='../../static/img/blank1.png'></image></view>
					<view class="text-center text-sm text-grey"><text >无任智能终端</text></view>
					<view class="text-center padding-top">
						<button v-if="permission_edit" @tap="onAdd()" class="cu-btn round lg bg-blue">
							<text class="cuIcon-forward"><text class="padding-left-sm">新增设备绑定</text></text> 
						</button>
					</view>
				</view>
			</view>
		</view>

		<view v-if="device_num>0">
			<view class="cu-bar solid-bottom ">
				<view class="action">
					
				</view>
				<view class="action">
					<view class="">
						<button v-if="permission_edit" @tap="onAdd()" class="cu-btn bg-blue shadow sm margin-right-xxs">新增设备绑定</button>
					</view>
				</view>
			</view>

			<scroll-view scroll-y="true" class="scroll-Y" :style='{ height: scrollHeight }' @scrolltoupper="" @scrolltolower="">
				<block v-for="(item, idx) in devices" :key="idx">
					<view class="item_panel margin-sm" hover-class="opcity" hover-stay-time="150" @tap="onTapDevice(item)">
						
						<view class="padding-sm flex align-center padding-top-lg">
							<view class="flex-treble text-left">
								<!-- <text class="iconfont icon-house text-gray "></text> -->
								<text v-if="item.online" class="iconfont  icon-yingjian  text-olive "></text>
								<text v-else class="iconfont  icon-yingjian  text-gray "></text>
								<text class=" text-icon-size  text-gray text-md padding-left-xs">{{item.device_addr}}</text>
							</view>
							<view class="flex-sub text-right justify-center">
								<view class="">
									<view v-if="item.online" class='cu-tag radius sm line-olive'>在线</view>
									<view v-else class='cu-tag radius sm line-gray'>离线</view>
								</view>
							</view>
						</view>
												
						<view class="padding-left padding-right flex align-center text-gray">
							<view class="flex-sub">
								<view class="fl text-xs  text-left"><text class="cuIcon-title text-grey"></text> <text class="padding-left-xs text-gray"> 饲喂器个数</text></view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xxs text-gray">
									{{item.node_num}}
								</view>
							</view>
						</view>
						
						<view class="padding-left padding-right flex align-center text-gray">
							<view class="flex-sub">
								<view class="fl text-xs  text-left"><text class="cuIcon-title text-grey"></text> <text class="padding-left-xs text-gray"> IP</text></view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xxs text-gray">
									{{item.device_ip}}
								</view>
							</view>
						</view>
						
						<view class="padding-left padding-right flex align-center text-gray">
							<view class="flex-sub">
								<view class="fl text-xs  text-left"><text class="cuIcon-title text-grey"></text> <text class="padding-left-xs text-gray"> 版本号</text></view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xxs text-gray">
									{{item.version}}
								</view>
							</view>
						</view>
						
						<view class="padding-left padding-right flex align-center text-gray padding-bottom-lg">
							<view class="flex-sub">
								<view class="fl text-xs  text-left"><text class="cuIcon-title text-grey"></text> <text class="padding-left-xs text-gray"> 最后心跳</text></view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xxs text-gray">
									{{item.lasttime}}
								</view>
							</view>
						</view>

					</view>
				</block>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import * as api from 'common/api.js';
	import {
		API_HEAD
	} from '../../common/api';
	export default {
		data() {
			return {
				scrollHeight: 0,
				mainHeight:0,
				loading:false,
		
				title: '',
				device_num:-1,
				devices:[],
				
				houseid:'',
				housename:'',

				permission_edit:false,
				permission_delete:false,
			}
		},
		onReady() {
			// 计算scroll-view高度
			uni.getSystemInfo({
				success: resu => {
					//console.info("窗口高度:", resu.windowHeight)
					const query = uni.createSelectorQuery()
					query.select('.title').boundingClientRect()
					query.exec(res => {
		
						//console.info("顶部下拉区域:", res[0])
						this.mainHeight = resu.windowHeight - res[0].height - 50 + 'px';
						this.scrollHeight = resu.windowHeight - res[0].height - 70 + 'px';
						console.log('剩余高度', this.mainHeight);
					})
				}
			})
		},
		onLoad(option) {
			this.houseid = option.id
			this.housename = option.housename
			uni.setNavigationBarTitle({
				title: this.housename
			});
		},
		onShow: function() {
			console.info("onShow")
			uni.setNavigationBarTitle({
				title: this.housename
			});
			this.checkPermission()
			this.loadDevices()
		},
		methods: {
			onAdd(){
				console.info("onAdd")
				uni.navigateTo({
					url: "/pages/topo/device_edit?id=&houseid="+this.houseid+"&housename="+this.housename
				})
			},
			onTapDevice(item) {
				//console.info(JSON.stringify(item))
				if(this.permission_edit){
					uni.navigateTo({
						url: "/pages/topo/device_edit?id=" + item.id +"&houseid="+this.houseid+"&housename="+this.housename
					})
				}
				
			},
			checkPermission(){
				var that = this
				that.permission_edit = false
				that.permission_delete = false
				getApp().getActions("/Topo/Device").then(function(res){
					if (res.code >= 0) {
						console.info(res.data)
						that.actions = res.data
						
						for(var i=0;i<that.actions.length;i++){
							if(that.actions[i].action_id=='edit'){
								that.permission_edit = true
							}
							if(that.actions[i].action_id=='delete'){
								that.permission_delete = true
							}
						}
					}else{
						uni.showToast({
							title: '系统异常，请联系管理员',
							icon: 'none'
						})
					}
				})
			},
			loadDevices(){
				var that = this
				var token = getApp().getToken()
				api.myRequest({
					url: '/Api/Device/ByHouse',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {
						houseid: that.houseid
					},
				}, false).then(res => {
					that.loading = false
					if (res.code >= 0) {

						var list = res.data
						//console.info(list)
						that.device_num = list.length
						that.devices = list
					} else {

					}
				}).catch(err => {
					that.loading = false
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	/* uni-page-body {
		background-color: #f5f5f5 !important;
		min-height: 100% !important;
		height: auto !important;
	} */
	.avatar-img {
		width: 400rpx;
		height: 400rpx;
		opacity: .9;
		border-radius: 50%;
		align-self: center;
	}
	.item_panel {
		min-height: 200rpx;
		border-radius: 10rpx;
		/* background-color: #ffffff; */
		background-color: rgba(230, 230, 230, 0.3);
		box-shadow: 0 2px 4px rgba(100, 100, 155, 0.5);
	}
	.opcity{
		opacity: 0.6;
	}
</style>
